import { Layout,Menu,Input,Select,Button,Table,Tag,Space,Image  } from 'antd';
import Head from '../../components/header';
import { useEffect, useState,useRef } from 'react';
import './index.less'
import ModalA from '../serviceClass/ModalA'
import ModalB from '../serviceClass/ModalB'
import ModalC from '../serviceClass/ModalC'
const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;
const { Option } = Select;
const data = [
    {
      key: '1',
      name: '理发',
      img: 'https://img1.baidu.com/it/u=4213000944,3707987723&fm=26&fmt=auto&gp=0.jpg',
      h5: 'www.muban.com',
      content: '按照残疾人需求，为老人上门理发',
      price:38,
      sort:70,
      state:'启用'
    },
    {
        key: '2',
        name: '助医',
        img: 'https://img0.baidu.com/it/u=1039432984,2640632903&fm=26&fmt=auto&gp=0.jpg',
        h5: 'www.muban.com',
        content: '陪同残疾人到医院就诊',
        price:444,
        sort:222,
        state:'启用'
    }
    
    
  ];

function ServiceClass(){
    const childRef = useRef();
    const handleClick = () => {
		if(childRef){
			childRef.current.showModal() // 调用子组件方法
		}
    }
    const [select,setSelect]=useState([])
    const columns = [
        {
          title: '应用服务名称',
          dataIndex: 'name',
          key: 'name',
          width:180,
          
        },
        {
          title: '应用图标',
          key: 'img',
          render: (text, record) => (
             
            <Space size="middle">
              <Image key="i"
                    width={30}
                    src={record.img}
                  />
             
            </Space>
          ),
        },
        {
          title: 'H5',
          dataIndex: 'h5',
          key: 'h5',
        },
        {
          title: '描述',
          dataIndex: 'content',
          key: 'content',
        },
        {
          title: '费用',
          dataIndex: 'price',
          key: 'price',
        },
        {
          title: '排序',
          dataIndex: 'sort',
          key: 'sort',
        },
        {
          title: '状态',
          dataIndex: 'state',
          key: 'state',
        },
        {
          
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              
              <ModalA data={select} />
              <ModalB childRef={childRef}/>
              <ModalC/>
             
            </Space>
          ),
        },
      ];
    return (
        <div className="serviceBox">
         <Layout>
       <Head/>
       <Layout>
       <Sider>
       <Menu
           defaultSelectedKeys={['1']}
           defaultOpenKeys={['sub1']}
           mode="inline"
           theme="dark"
           
         >
           <Menu.Item key="1" >
           应用服务管理
           </Menu.Item>
           </Menu> 
         </Sider>
         <Content>
           <div className="text1">应用服务管理</div>
           <div className="contHeadBox">
                     <div className="numInp">
                     <span>编号</span>
                     <Input placeholder="请输入编号" />
                     </div>
 
                     <div className="nameInp">
                     <span>名称</span>
                     <Input placeholder="请输入名称" />
                     </div>
                     
                     <div className="selectInp">
                     <span >状态</span>
                     <Select
                       placeholder="请选择状态"
                       allowClear
                     >
                       <Option value="male">禁用</Option>
                       <Option value="female">启用</Option>
                       
                     </Select>
                     </div>
 
                     <div className="headbtn">
                     <Button type="primary">筛选</Button>
                     </div>
 
                     <div className="headadd">
                     <Button type="primary" onClick={handleClick}>添加</Button>
                     </div>
           </div>
           
           <div className="tablebox">
               <Table   columns={columns} dataSource={data} 
               onRow={(record, rowIndex) => {
                 return {
                   onClick: event => {
                     setSelect(record);
                   }, // click row
                   onDoubleClick: event => {}, // double click row
                   onContextMenu: event => {}, // right button click row
                   onMouseEnter: event => {}, // mouse enter row
                   onMouseLeave: event => {}, // mouse leave row
                 };
               }}/>
           </div>
         </Content>
       </Layout>
      
         </Layout>
         </div>
     )
}
export default ServiceClass;